<template>
  <div class="cards">
    <div style="text-align: center; padding: 20px;">会员卡购买历史</div>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      style="height: calc(100vh - 80px); overflow-y: auto;"
      @load="getHistory"
    >
      <HMemberCardVue v-for="item of memberCards" :key="item.id!" :card="item" show-status show-face-value />
    </van-list>
  </div>
</template>

<script lang="ts" setup>
// import dayjs from 'dayjs'
import { reactive, ref } from 'vue';
// import { useRoute } from 'vue-router'
// import QRCode, { QRCodeToDataURLOptions } from 'qrcode'
import { useAppStore } from '@/store/modules/app'
import { getHMemberCardAllApi } from '@/api/wechat'
import { type HMemberCard } from '@/api/wechat/types'
import HMemberCardVue from '@/components/HMemberCard.vue'

const appStore = useAppStore()
appStore.setTabbarIndex(1)

const pageSize = ref(10)
const pageIndex = ref(1)
const memberCards = reactive<HMemberCard[]>([])
const loading = ref(false);
const finished = ref(false);

// const route = useRoute()

const getHistory = async () => {
  const { data } = await getHMemberCardAllApi({ pageIndex: pageIndex.value,  pageSize: pageSize.value })
  loading.value = false
  pageIndex.value += 1
  for (const row of data.rows) {
    memberCards.push(row)
  }

  if (memberCards.length >= data.count) {
    finished.value = true
  }
}

</script>

<style lang="scss" scoped>
.list-item {
  border-radius: 10px;
  width: 94%;
  margin: 0 auto;
  height: 100px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 20px;
  box-sizing: border-box;

  .detail {
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
  }
}

.list-item+.list-item {
  margin-top: 20px;
}
</style>
